<template>
  <div>
    <el-form ref="layerForm" :model="layerForm" label-width="80px" size="mini">
      <el-form-item label="图层名称:">
        <el-input
          placeholder="请输入内容"
          v-model="layerForm.name"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="图层类型:">
        <el-select v-model="layerForm.layerType" placeholder="请选择">
          <el-option
            v-for="item in layerType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="layerForm.layerType && layerForm.layerType == 'file'" label="文件:">
        <el-upload
          class="fileUpload"
          ref="fileUpload"
          :action='baseURL+"layerAttach/fileUpload"'
           multiple
           accept=".zip"
          :file-list="fileList"
          :on-success="fileSuccess"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传zip(shp文件压缩包)，且不超过10M</div>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-if="layerForm.layerType && (layerForm.layerType == 'dynamicLayer' || layerForm.layerType == 'wmts' || layerForm.layerType == 'wms')"
        label="图层地址:"
      >
        <el-input placeholder="请输入内容" v-model="layerForm.serverUrl" clearable></el-input>
      </el-form-item>
      <el-form-item
        v-if="layerForm.layerType && (layerForm.layerType == 'dynamicLayer' || layerForm.layerType == 'wms')"
        label="图层编号:"
      >
        <el-input placeholder="请输入内容" v-model="layerForm.layerIndex" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="layerForm.layerType && layerForm.layerType == 'POI'" label="专题图层:">
        <el-button @click="editThematicData" type="info">编辑数据</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitLayerForm()">确定</el-button>
        <el-button @click="cancelLayerForm()">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="数据编辑" :visible.sync="showEditMap" width="60%" append-to-body>
      <ol-map :map-id="mapId"></ol-map>
    </el-dialog>
  </div>
</template>
<script>
  import OlMap from '../map/OLMap'
  export default {
    name:"Layer",
    components:{OlMap},
    data(){
      return{
        mapId:"editMap",
        baseURL:window.baseURL,
        layerForm:{
          id:"",
          name:"",
          serverUrl:"",
          layerIndex:"",
           fid:"",
          layerType:"",
          layerExtent: ""
        },
        layerType:[{
          "value":"dynamicLayer",
          "label":"动态图层"
        },{
          "value":"wmts",
          "label":"影像"
        },{
          "value":"file",
          "label":"矢量数据"
        },{
          "value":"POI",
          "lable":"专题图层"
        },{
          "value":"wms",
          "lable":"wms图层"
        }],
        fileList:[],
        showEditMap:false
      }
    },
    props:{
      nodeData:{
        type:Object,
        default:null
      },
      actionType:{
        type:String,
        default: "add"
      },
      freshTreeData:Function
    },
    watch:{
      nodeData:{
        handler(newValue,oldValue){
          this.setValue();
        },
        deep:true
      }
    },
    mounted(){
      this.setValue();
    },
    methods:{
      setValue(){
        if(this.$refs.fileUpload){
          this.$refs.fileUpload.clearFiles();
        }
        if(this.actionType == "add"){
          this.layerForm = {
             id:"",
              name:"",
              serverUrl:"",
              layerIndex:"",
              fid:"",
              layerType:"",
              layerExtent: ""
          }
          this.layerForm.fid = this.nodeData.id;
        }else{
          this.layerForm.id = this.nodeData.id;
          this.layerForm.name = this.nodeData.name;
          this.layerForm.serverUrl = this.nodeData.serverUrl;
          this.layerForm.layerIndex = this.nodeData.layerIndex;
          this.layerForm.layerType = this.nodeData.layerType;
          this.layerForm.fid = this.nodeData.fid;
          this.layerForm.layerExtent = this.nodeData.layerExtent;
          if(this.nodeData.layerType == "file"){
            var self = this;
            this.$http.getAttachById(this.nodeData.serverUrl).then(res => {
              self.fileList=[res.data.data]
            })
              .catch(err => {
                console.log("获取附件失败！！");
              });
          }
        }
      },


      //提交图层管理编辑
      submitLayerForm(){
        if(!this.layerForm.name){
          this.$message({
            message: '图层名称不能为空！！！',
            type: 'warning'
          });
          return
        }
        if (this.layerForm.layerType == "dynamicLayer" || this.layerForm.layerType == "wms") {
          if (!this.layerForm.serverUrl) {
            this.$message({
              message: "图层地址不能为空！！！",
              type: "warning"
            });
            return;
          }
          if (!this.layerForm.layerIndex) {
            this.$message({
              message: "图层编号是必须的！！！",
              type: "warning"
            });
            return;
          } 
          // else if (
          //   this.layerForm.layerIndex
          //    && isNaN(this.layerForm.layerIndex)
          // ) {
          //   this.$message({
          //     message: "图层编号必须是一个数字！！！",
          //     type: "warning"
          //   });
          //   return;
          // }

          // this.setExtent();
        }
        if (this.layerForm.layerType == "wmts") {
          this.layerForm.layerIndex = "";
          this.layerForm.layerExtent = "";
          if (!this.layerForm.serverUrl) {
            this.$message({
              message: "图层地址不能为空！！！",
              type: "warning"
            });
            return;
          }
          this.pushDataSource();
        }
        if (this.layerForm.layerType == "file") {
          this.layerForm.layerIndex = "";
          this.layerForm.layerExtent = "";
          if(this.fileList.length == 1){
            this.$refs.fileUpload.submit();
          }else{
            this.$message({
              message: "请上传shp、kml、kmz文件!!",
              type: "warning"
            });
            return;
          }
        }
        if (this.layerForm.layerType == "POI") {
          this.layerForm.layerIndex = "";
          this.layerForm.layerExtent = "";
          this.layerForm.serverUrl = "";          
        }
        this.pushDataSource();
        this.$emit('showDialog',false)
      },
      setExtent(){
        var self = this;
        loadModules([
          "esri/request"
        ]).then(([esriRequest])=>{
          //如果是基础图层 分类统计个数 业务同层 分类统计面积
          var layerUrl = self.layerForm.serverUrl+"/"+this.layerForm.layerIndex;
          var layersRequest = esriRequest({
            url: layerUrl,
            content: { f: "json" },
            handleAs: "json",
            callbackParamName: "callback"
          });
          layersRequest.then(res=>{
            self.layerForm.layerExtent = JSON.stringify(res.extent);
            self.pushDataSource();
          }).catch(err=>{
            self.message.error("图层信息有误！！！！");
            console.log("获取图层信息失败！！！")
          })
        }).catch(err=>{
          console.log("获取arcgis api数据失败！！")
        })
      },
      //取消编辑
      cancelLayerForm(){
        this.$emit('showDialog',false);
      },

      //文件上传成功后的回调
      fileSuccess(res){
        this.layerForm.serverUrl = res.data;
        this.pushDataSource();
        this.$refs.fileUpload.clearFiles();
      },
      //文件列表发生改变后的事件回调
      handleChange(file,fileList){
        if(fileList.length > 1){
          for(var i = 0; i<fileList.length;i++){
            if(fileList[i].uid != file.uid){
              fileList.splice(i,1);
            }
          }
        }
        this.fileList = fileList;
      },
      editThematicData(){
        this.showEditMap = true;
      },
      //判断完保存数据
      pushDataSource(){
        var self = this;
        this.$http.editLayer(this.layerForm).then(res => {
          self.layerForm.id = res.data.data;
          self.freshTreeData(self.layerForm);
        })
          .catch(err => {
            console.log("获取附件列表失败！！");
          });
      }

    }
  }
</script>
<style scoped>
  #father{
    margin-bottom: 18px
  }
</style>
